<template>
    <div id="job-slip-detail">
        <el-dialog
            :title="titleCon"
            v-model="isUseDialog" 
            draggable 
            :close-on-click-modal="false"
            :fullscreen="true"
            :before-close="handleClose"
            :destroy-on-close="true"
            class="set-dialog"
        >
            <div style="background-color: #fff;width: 30%;height: auto;padding: 20px;margin: auto;">
                <div style="width: 100%;" ref="jobCount" id="jobCount" class="job-count">
                    <!-- 顶部标题/编号 -->
                    <div class="title-header">
                        <h3 style="text-align: center;">{{ titleHeader }}</h3>
                        <p style="font-size: 12px;"><span class="title-header-span">编号：</span>{{ jobNum }}</p>
                    </div>
                    <!-- 中间内容 -->
                    <div v-if="currenStatus === 0" class="job-center">
                        <FireTop :repairInfo="repairInfo" />
                    </div>
                    <div v-if="currenStatus === 1" class="job-center">
                        <EleDetail :repairInfo="repairInfo" />
                    </div>
                    <!-- 底部备注 -->
                    <div class="remark-footer"><span class="remark-footer-span">备注：</span>{{ jobRemark }}</div>
                </div>
            </div>
            <template #footer>
                <el-button style="margin-right: 20px;" type="warning" v-print="'#jobCount'" @click="submitHandel">打印票据</el-button>
                <el-button @click="cancelUseClick">关 闭</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref , computed, watch , reactive , toRefs } from 'vue';
import { ElButton, ElDialog } from 'element-plus';
import FireTop from './jobSlipTemplate/fire-top.vue';
import EleDetail from './jobSlipTemplate/ele-detail.vue';
import print from 'vue3-print-nb';
export default defineComponent( {
    name: 'job-slip-detail',
    components: {FireTop , EleDetail},
    props: {
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: String,
            default: ''
        }
    },
    directives: { print },
    setup(props,ctx){
        const titleCon = ref();
        const jobCount = ref();
        const state = reactive({
            titleHeader: '',
            jobNum: '',
            jobRemark: '',
            currenStatus: -1,
        });
        let remarkArr = [
            '《作业证》一式三联，一级由动火所在车间监火人，动火执行人和安全管理部门各持一份，二级由动火点所在车间各持一份《作业证》保存期限至少为1年。',
            '《作业证》一式二联，作业单位和安全管理部门各持一份，《作业证》保存期限至少为1年。'
        ];

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            cancelUseClick();
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('cancelJobClick');
        }

        /*** 打印票据 */
        const submitHandel = () => {
            console.log('测试')
        }

        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                titleCon.value = '作业票详情';
                let getData = JSON.parse(props.repairInfo);
                state.jobNum = getData.v_ApplyNO;
                if(getData.n_JobType === 0){
                    state.titleHeader = '动火安全作业票';
                    state.jobRemark = remarkArr[0];
                    state.currenStatus = 0;
                }
                if(getData.n_JobType === 1){
                    state.titleHeader = '临时用电安全作业票';
                    state.jobRemark = remarkArr[1];
                    state.currenStatus = 1;
                }
            }
        })

        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog;
        })

        return {
            handleClose,
            cancelUseClick,
            titleCon,
            isUseDialog,
            submitHandel,
            jobCount,
            ...toRefs(state)
        }
    },
} )
</script>
<style scoped lang="scss">
:deep(.el-dialog__body){
    height: calc(100vh - 110px);
    max-height: none!important;
    padding: 0px !important;
    overflow-y: auto;
}
:deep {
    @media print {
        #jobCount{
            size: auto;
            margin-bottom: 0;
        }
    }
}
.job-count{
    width: 50%;
    margin: auto;
    background-color: #fff;
    color: #191919;
    font-family: "宋体";
    // padding: 20px;
}
.title-header{
    width: 100%;
    h2{
        width: 100%;
        text-align: center;
        font-weight: bold;
    }
    p{
        text-align: right;
        .title-header-span{
            font-weight: 700;

        }
    }
}
.remark-footer{
    width: 100%;
    text-align: center;
    font-size: 12px;
    padding: 10px 20px;
    .remark-footer-span{
        font-weight: 700;
    }
}
.job-center{
    // margin: 20px 0;
    // border-top: 1px solid #191919;
    // border-left: 1px solid #191919;
}
:deep(.el-overlay){
    .el-overlay-dialog{
        .el-dialog{
            .el-dialog__body{
                padding: 0px !important;
            }
        }
    }
} 
</style>